<template>
  <div class="l-b-right">
    <div class="l-b-r-title">用户登录</div>
    <div class="login-form">
      <el-form ref="ruleForm" :model="form" :rules="rules" class="ruleForm">
        <el-form-item prop="loginName">
          <div class="login-input">
            <i class="iconfont icon-user" />
            <el-input v-model="form.loginName" placeholder="请输入用户名" :clearable="true" />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="login-input login-password">
            <i class="iconfont icon-password" />
            <el-input v-model="form.password" type="password" placeholder="请输入密码" :clearable="true" />
          </div>
        </el-form-item>
        <el-form-item>
          <div class="login-button" @click="submitForm">登录</div>
        </el-form-item>
        <div class="tips">账号：admin 密码：admin</div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginBlock',
  data() {
    return {
      form: {
        loginName: '',
        password: ''
      },
      rules: {
        loginName: [{ required: true, message: '用户名不能为空' }],
        password: [{ required: true, message: '密码不能为空' }]
      }
    }
  },
  methods: {
    submitForm() { // 提交
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/login', this.form).then(() => {
            this.$router.push('/home/index')
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.l-b-right{
  width: 558px;
  text-align: center;
  .l-b-r-title{
    margin: 40px 0 70px;
    font-size: 36px;
    letter-spacing: 10px;
    font-weight: 700;
    color: #23B7E5;
  }
  .login-form{
    margin-bottom:40px;
    margin-left:54px;
    :deep .login-input{
      display: flex;
      align-items: center;
      width: 447px;
      height: 56px;
      background: url("../../../assets/img/login/login-input-bgi.png") no-repeat;
      background-size: 100% 100%;
      .iconfont{
        width: 50px;
        text-align: center;
        font-size: 26px;
        color: rgb(107,181,226);
      }
      .el-input__inner{
        border: none;
      }
      .el-button{
        width: 100px;
        height: 40px;
      }
    }
    .login-password{
      padding-left: 4px;
    }
    .login-button{
      margin-top: 30px;
      cursor: pointer;
      width: 447px;
      height: 46px;
      border-radius: 5px;
      background-color: rgb(91,174,223);
      line-height: 46px;
      font-size: 20px;
      color: #fff;
      &:hover{
        background-color: rgb(91,170,220);
      }
      &:active{
        background-color: rgb(91,170,220);
      }
    }
  }
  .tips{
    text-align: left;
    color: #fff;
  }
}

</style>
